<template>
  <div class="news-box">
    <div class="search-box">
      <el-select v-model="search.status" class="m-2" placeholder="状态" size="large" @change="getDetail" clearable>
        <el-option v-for="item in statusArr" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
    </div>
    <el-form :model="form" ref="formRef" :rules="rules" label-width="150px" class="demo-ruleForm">
      <el-form-item label="每单最少回收总数:" prop="zuishaoshuji">
        <el-input type="text" placeholder="请输入内容" size="large" v-model="form.zuishaoshuji" maxlength="50"
          show-word-limit>
        </el-input>
      </el-form-item>
    </el-form>
    <div class="bottom-btn">
      <el-button type="primary" @click="editFun">确定</el-button>
    </div>
  </div>
</template>
<script setup>
import { computed, onMounted, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { shujizhekou } from '@api/zhekou'
import { useUserStore } from "@/pinia/user"
import { ElMessage } from 'element-plus'

const userStore = useUserStore()

const router = useRouter()

const search = ref({
  status: "-1"
})

const statusArr = ref([
  {
    label: "黑名单",
    value: "-1"
  },
  {
    label: "普通",
    value: "0"
  },
  {
    label: "新品",
    value: "1"
  },
  {
    label: "精品书籍",
    value: "2"
  }
])

// *********************************************列表
const form = ref({
  zuishaoshuji: '',
  zuishaoprice: ''
})

const rules = reactive({
  zuishaoshuji: [{ required: true, message: '每个订单最少书籍回收总数不能为空!', trigger: 'blur' }],
  zuishaoprice: [{ required: true, message: '每个订单最小总金额不能为空!', trigger: 'blur' }]
})

//获取列表
async function getDetail() {

  let res = await shujizhekou({ status: search.value.status, zhekou: "" })
  if (res.code == 200) {
    form.value = res.data
  }

}

//添加文章
const editFun = async () => {
  const { zuishaoshuji, zuishaoprice } = form.value;

  const res = await updateServerConfig({ zuishaoshuji, zuishaoprice })

  if (res.code == 200) {
    ElMessage({
      message: '操作成功!',
      type: 'success',
    })
    getDetail()
  }
}

onMounted(() => {
  getDetail()
})
</script>
<style lang="scss" scoped>
.news-box {
  width: 500px;

  .search-box {
    padding-left: 150px;
    margin-bottom: 30px;
  }

  .bottom-btn {
    padding-left: 150px;
    margin-top: 30px;
  }
}
</style>
